<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>后台管理界面</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" >
    <link href="./css/admin.css" rel="stylesheet">
    <link href="./css/modal.css" rel="stylesheet">
    <script src="js/jquery-3.7.1.min.js"></script>
</head>
<body onload="updateTime()">
    <div class="header">
        <div class="admin-info">
            <img alt="管理员头像" src="./images/avatar/admin.jpg" style="height:40px;width:40px">
            <span>管理员</span>
            <span class="time" id="time" style="margin-left: 10px; margin-top: 5px"></span>
        </div>
        <div class="title">后台管理系统</div>
        <a class="logout" href="login.html">退出登录</a>
    </div>
    <div class="sidebar">
        <a data-target="1" href="javascript:void(0)"><span class="material-icons">person</span>用户管理</a>
        <a data-target="2" href="javascript:void(0)"><span class="material-icons">shopping_cart</span>商品管理</a>
        <a data-target="3" href="javascript:void(0)"><span class="material-icons">flash_on</span>秒杀活动管理</a>
        <a data-target="4" href="javascript:void(0)"><span class="material-icons">receipt</span>订单管理</a>
        <a data-target="5" href="javascript:void(0)"><span class="material-icons">support_agent</span>客服</a>
    </div>
    <div class="content active" id="welcome">
        <h1>欢迎使用后台管理系统</h1>
        <p>请点击左侧菜单项目进行操作</p>
    </div>
    <div class="content" id="1">
        <h1>用户管理</h1>
        <div class="search-bar">
            <label class="search">
                <input class="searchInput" placeholder="搜索用户..." type="text"><button class="searchBtn">搜索</button>
            </label>
            <button id="addUserBtn" class="addBtn">添加用户</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>用户ID</th>
                    <th>头像</th>
                    <th>账号</th>
                    <th>密码</th>
                    <th>昵称</th>
                    <th>余额</th>
                    <th>订单</th>
                    <th>插入时间</th>
                    <th>更新时间</th>
                    <th>状态</th>
                    <th>启用</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="usersTableBody">
            </tbody>
        </table>
        <!-- 添加用户弹窗 -->
        <div class="modal" id="addUserModal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>添加用户</h2>
                <form id="addUserForm">
                    <div>
                        <label for="selectedAvatar">头像:</label>
                        <img alt="Selected Avatar" class="avatar-option" id="selectedAvatar" src="./images/avatar/780.jpg">
                        <button id="selectAvatarBtn" type="button">选择头像</button>
                    </div>
                    <div>
                        <label for="account">账号:</label>
                        <input id="account" name="account" type="text">
                    </div>
                    <div>
                        <label for="password">密码:</label>
                        <input id="password" name="password" type="password">
                    </div>
                    <div>
                        <label for="userName">名字:</label>
                        <input id="userName" name="name" type="text">
                    </div>
                    <button type="submit">提交</button>
                </form>
            </div>
        </div>
        <!-- 选择头像弹窗 -->
        <div class="modal" id="avatarModal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>选择头像</h2>
                <div id="avatarOptions">
                    <img alt="Avatar 1" class="avatar-option" src="./images/avatar/image1.jpg">
                    <img alt="Avatar 2" class="avatar-option" src="./images/avatar/image2.jpg">
                    <img alt="Avatar 3" class="avatar-option" src="./images/avatar/image3.JPG">
                </div>
            </div>
        </div>
        <div class="pagination">
            <button onclick="showInfo('当前为第一页')">上一页</button>
            <button onclick="showInfo('当前为最后一页')">下一页</button>
        </div>
    </div>
    <div class="content" id="2">
        <h1>商品管理</h1>
        <div class="search-bar">
            <label class="search">
                <input class="searchInput" id="searchGoodsInput" placeholder="搜索商品..." type="text"><button class="searchBtn" id="searchGoodsBtn" onclick="getProducts()">搜索</button>
            </label>
            <button id="addGoodsBtn" class="addBtn">添加商品</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>商品ID</th>
                <th>图片</th>
                <th>名称</th>
                <th>价格</th>
                <th>库存</th>
                <th>分类</th>
                <th>状态</th>
                <th>启用</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="goodsTableBody">
            </tbody>
        </table>
        <div id="pagination"></div>
    </div>
    <label for="categorySelectTemplate"></label><select id="categorySelectTemplate" style="display: none;">
        <option value="1">家电</option>
        <option value="2">数码</option>
        <option value="3">文具</option>
        <option value="4">箱包</option>
        <option value="5">服饰</option>
        <option value="6">运动</option>
    </select>
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">×</span>
            <form id="productForm">
                <h1>添加商品</h1>
                <label for="uploadImage">上传图片:</label>
                <input type="file" id="uploadImage" name="image" accept="image/*">
                <span style="font-size: 11px;transform: translateY(30px);">温馨提示：请先点击选择文件选择图片后，再点击确认上传</span>
                <button id="uploadBtn">确认上传</button>
                <img id="image" src="https://via.placeholder.com/100" alt="图片">
                <br><br>
                <label for="goodsName">名称:</label>
                <input type="text" id="goodsName" name="name"><br><br>
                <label for="price">价格:</label>
                <input type="number" id="price" name="price"><br><br>
                <label for="stock">库存:</label>
                <input type="number" id="stock" name="stock"><br><br>
                <label for="category">分类:</label>
                <select id="category" name="category">
                    <option value="家电">家电</option>
                    <option value="数码">数码</option>
                    <option value="文具">文具</option>
                    <option value="箱包">箱包</option>
                    <option value="服饰">服饰</option>
                    <option value="运动">运动</option>
                </select><br><br>
                <input type="submit" value="提交">
            </form>
        </div>
    </div>
    <div class="content" id="3">
        <h1>秒杀活动管理</h1>
        <div class="search-bar">
            <p> </p>
            <button id="addActivityBtn" class="addBtn">添加活动</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>活动ID</th>
                <th>活动商品ID</th>
                <th>活动开始时间</th>
                <th>活动结束时间</th>
                <th>活动价格</th>
                <th>活动限购</th>
                <th>活动库存</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="secKillTableBody">
            </tbody>
        </table>
    </div>
    <div id="addActivityModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <form id="addActivityForm">
                <h1>添加活动</h1>
                <div class="form-group">
                    <label for="productId">商品名称</label>
                    <select id="productId" name="productId" required>
                        <!-- 动态生成选项 -->
                    </select>
                </div>
                <div class="form-group">
                    <label for="startTime">活动开始时间</label>
                    <input type="time" id="startTime" name="startTime" required>
                </div>
                <div class="form-group">
                    <label for="endTime">活动结束时间</label>
                    <input type="time" id="endTime" name="endTime" required>
                </div>
                <div class="form-group">
                    <label for="ACPrice">活动价格</label>
                    <input type="number" id="ACPrice" name="price" required>
                </div>
                <div class="form-group">
                    <label for="ACStock">活动库存</label>
                    <input type="number" id="ACStock" name="stock" required>
                </div>
                <div class="form-group">
                    <label for="limit">活动限购</label>
                    <input type="number" id="limit" name="limit" required>
                </div>
                <button type="button" id="submitBtn">提交</button>
            </form>
        </div>
    </div>
    <div class="content" id="4">
        <h1>订单管理</h1>
        <div class="search-bar">
            <label class="search">
                <input class="searchInput" id="searchOrdersInput" placeholder="搜索商品..." type="text"><button class="searchBtn" id="searchOrdersBtn" onclick="getAllOrders()">搜索</button>
            </label>
        </div>
        <table>
            <thead>
            <tr>
                <th>订单号</th>
                <th>用户ID</th>
                <th>商品图片</th>
                <th>商品名字</th>
                <th>购买数量</th>
                <th>实付款</th>
                <th>状态</th>
                <th>时间</th>
            </tr>
            </thead>
            <tbody id="ordersTableBody">
            </tbody>
        </table>
    </div>
    <div class="content" id="5">
        <div class="chat-window">
            <div class="chat-header">
                <h1>管理员后台聊天</h1>
            </div>
            <div class="chat-body">
                <!-- 聊天记录将显示在这里 -->
            </div>
            <div class="chat-footer">
                <label for="adminMessage"></label><input type="text" id="adminMessage" placeholder="输入消息...">
                <button onclick="sendMessage()">发送</button>
            </div>
        </div>
    </div>
    <div class="infoModal" id="infoModal">
        <div class="infoModalContent">
            <p id="infoTitle"></p>
            <button id="confirmBtn">确定</button>
        </div>
    </div>
    <script src="./js/admin.js"></script>
    <script src="./js/modal.js"></script>
</body>
</html>
